<template>
<view class="index-main">
	<view class="component-wrap">
		<home v-show="curr == 'home'"></home>
		<square v-show="curr == 'square'"></square>
		<message v-show="curr == 'message'"></message>
		<my v-show="curr == 'my'"></my>
	</view>
	<view class="bottom-nav-bar">
		<view class="item" v-for="(item, prop) in itemObj" :key="prop" @click="curr = prop" >
			<image class="icon" :src="prop == curr ? item.imageSelected : item.image" mode="widthFix"></image>
			<text :class="{'selected': prop == curr }">{{ item.label }}</text>
		</view>
	</view>
	
	<!-- 登录弹窗 -->
	<slide-popup v-model="loginPopup.show" height="600rpx">
		<view class="login-popup">
			<view class="head-tips">
				手机号主要是更好地服务用户，向用户提供具有辨识度的用户界面
			</view>
			<view class="form-wrap">
				<view class="line">
					<view class="label">手机号码</view>
					<input type="number" class="input" placeholder="请输入手机号码"/>
					<view class="get-code-btn">
						<view v-if="loginPopup.time == 0" @click="getCode">获取验证码</view>
						<view v-else>{{ loginPopup.time }}s</view>
					</view>
				</view>
				<view class="line">
					<view class="label">验证码</view>
					<input type="number" class="input" placeholder="请输入6位验证码"/>
				</view>
			</view>
			<view class="confirm-btn btn">登陆</view>
		</view>
	</slide-popup>
</view>
</template>

<script>
import Home from "./home/index.vue"
import Square from "./square/index.vue"
import Message from "./message/index.vue"
import My from "./my/index.vue"
import SlidePopup from "@/components/slide-popup.vue"

export default {
	data() {
		return {
			// 当前选项
			curr: "home",
			// 选项列表
			itemObj: {
				"home": { 
					label: "首页",
					image: "/static/images/icon/home.svg",
					imageSelected: "/static/images/icon/home-selected.svg"
				},
				"square": {
					label: "广场",
					image: "/static/images/icon/square.svg",
					imageSelected: "/static/images/icon/square-selected.svg"
				},
				"message": {
					label: "消息",
					image: "/static/images/icon/message.svg",
					imageSelected: "/static/images/icon/message-selected.svg"
				},
				"my": { 
					label: "我的",
					image: "/static/images/icon/user.svg",
					imageSelected: "/static/images/icon/user-selected.svg"
				}
			},
			// 首页页面数据
			dataHome: {  },
			// 广场页面数据
			dataPoint: {},
			// 消息页面数据
			dataMy: {  },
			// 我的页面数据
			dataMy: {  },
			// 登录弹窗相关
			loginPopup: {
				show: false,
				time: 0,
				timerId: -1
			}
		}
	},
	computed: {
		currComponent () {
			return this.itemObj[this.curr]
		}	
	},
	created () {
		this.$.appContext.config.globalProperties.$index = this
		this.$.appContext.config.globalProperties.$dataHome = this.dataHome
		this.$.appContext.config.globalProperties.$dataPoint = this.dataPoint
		this.$.appContext.config.globalProperties.$dataMy = this.dataMy
	},
	methods: {
		// 获取验证码
		getCode () {
			this.loginPopup.time = 10
			this.loginPopup.timerId = setInterval(() => {
				this.loginPopup.time--
				if (this.loginPopup.time == 0) {
					clearInterval(this.loginPopup.timerId)
				}
			}, 1000)
		}
	},
	components: {
		Home,
		Square,
		Message,
		My,
		SlidePopup
	},
}
</script>

<style lang="less">
.index-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100vh;
	background: #F0F0F0;
	
	>view {
		width: 750rpx;
	}
	
	.component-wrap {
		flex: 1;
		background: #F0F0F0;
		overflow: hidden;
		
		.tab-view {
			height: 100%;
			overflow-y: auto;
			position: relative;
			background: #FFFFFF;
			
			>view {
				position: relative;
			}
		}
	}
	
	.bottom-nav-bar {
		flex-shrink: 0;
		position: relative;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--bottomNavHeight);
		background: #FFFFFF;
		
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			transition: .2s;
			flex: 1;
			transition: .1s;
			
			&:active {
				opacity: 0.8;
			}
			
			.icon {
				width: 48rpx;
				height: 48rpx;
				color: red;
			}
				
			>text {
				font-weight: 500;
				font-size: 18rpx;
				margin-top: 16rpx;
				color: #3D3D3D;
			}
		}
	}
	
	.login-popup {
		padding: 48rpx 32rpx 0;
		
		.head-tips {
			font-size: 28rpx;
			line-height: 40rpx;
			color: #D1D1D1;
		}
		
		.form-wrap {
			margin-top: 30rpx;
			
			.line {
				position: relative;
				height: 105rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #F6F8FA;
				
				.label {
					width: 115rpx;
					font-size: 28rpx;
					color: #080808;
				}
				
				.input {
					margin-left: 40rpx;
					width: 300rpx;
					font-size: 28rpx;
					color: #5D667B;
				}
				
				.get-code-btn {
					position: absolute;
					width: 142rpx;
					right: 32rpx;
					font-size: 28rpx;
					color: #FF6D03;
					text-align: center;
				}
			}
		}
		
		.confirm-btn {
			margin-top: 76rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 84rpx;
			border-radius: 12rpx;
			opacity: 1;
			background: #FF6D03;
			font-size: 32rpx;
			line-height: 1;
			color: #FFFFFF;
		}
	}
}
</style>
